<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>发布帖子</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <style>
       
  </style>
</head>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>帖子编辑</legend>
  </fieldset>

  <form class="layui-form" action="">
     <input type="hidden" name="userId" id="userId">
    <div class="layui-form-item">
      <label class="layui-form-label">单行输入框</label>
      <div class="layui-input-block">
        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
      </div>
    </div>

      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">正文</label>
        <div class="layui-input-block">
          <textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
          <input type="radio" name="lastType" value="0" title="寻找失物" checked="">
          <input type="radio" name="lastType" value="1" title="寻找失主">
        </div>
      </div>


    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-inline">
          <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>


    <div class="layui-form-item" >
      <label class="layui-form-label">物品分类</label>
      <div class="layui-input-inline">
        <select name="type" lay-filter="type" id="type-picker">

        </select>
      </div>
    </div>



    <div class="layui-form-item" id="area-picker">
        <div class="layui-form-label">地址</div>
        <div class="layui-input-inline" style="width: 200px;">
          <select id="province" class="province-selector" data-value="云南省" lay-filter="province-1">
          </select>
        </div>
        <div class="layui-input-inline" style="width: 200px;">
          <select id="city" class="city-selector" data-value="昆明市" lay-filter="city-1">
          </select>
        </div>
        <div class="layui-input-inline" style="width: 200px;">
          <select id="county" class="county-selector" data-value="嵩明县" lay-filter="county-1">
          </select>
        </div>
        <div class="layui-input-inline">
            <input type="text" id="addr" lay-verify="required" placeholder="详细地址" autocomplete="off" class="layui-input"  οnblur="demo()">
        </div>
        <input type="hidden" name="address" id="address" value="">
    </div>



    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      </div>
    </div>
  </form>


<script src="../js/application.js"></script>
<script src="../layui/layui.js"></script>
<script>
  var LocString = String(window.document.location.href);
  function GetQueryString(name) {
    var rs = new RegExp("(^|)" + name + "=([^&]*)(&|$)", "gi").exec(LocString), tmp;
    if (tmp = rs) {
      return decodeURI(tmp[2]);
    }
    // parameter cannot be found
    return "";
  }
  var userId = GetQueryString("userId");
  var phone = GetQueryString("phone");



  console.log(userId);
  console.log(phone);


//一般直接写在一个js文件中
layui.config({
    base: '../js/mods/',
    version: '1.0',

});
  layui.use(['form', 'layedit', 'laydate', 'layarea','upload'], function(){
  var form = layui.form
  ,$ = layui.$
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate
  ,layarea = layui.layarea
  ,upload = layui.upload;

  $("#userId").val(userId);

  $("#addr").blur(function(){
    　     var s1 = $('#province').val() , s2 = $('#city').val(),
        s3 = $('#county').val() , s4 = $('#addr').val();
    var addresses = s1+s2+s3+s4;

    var str = "[{title:"+addresses+" }]"

    $('#address').val(addresses);
    console.log(addresses);
    console.log( $('#address').val());  
});

  var layedit = layui.layedit;
  layedit.set({
    uploadImage: {
      url: urlapi + 'pushInfo/imageUpload',
      data: {"dic":phone},
      type: 'post' //默认post
    }
  });

  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 1){
        return '标题不得為空';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });


  //监听提交
  form.on('submit(demo1)', function(data){
    
    
    layer.alert("确定信息无误吗", {
       title: '确定信息无误吗？'
      ,skin: 'layui-layer-molv' //样式类名 自定义样式
      , closeBtn: 1 // 是否显示关闭按钮
      , anim: 4 //动画类型
      , btn: ['确定', '取消'] //按钮
      , icon: 1 // icon
      , yes: function (){

        $.ajax({
            url:urlapi+'pushInfo/webaddpushInfo',
            data: {'adddata':JSON.stringify(data.field)},
            type: "Post",
            dataType: "json",
            success: function (data) {
                showloading(false);
                layer.msg(data.msg+",等待管理审核吧！");

                if (data.code == 1) {
                    setTimeout(function () {
                        location.reload();
                        window.location.href="index.html";
                    }, 1000);

                }

            },
            error: function () {
                layer.msg(data.msg+"是不是网络不太好呢？");
                showloading(false);
            }
        });


      }
    })
    
    
    return false;
  });
 
  
  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  

    layarea.render({
        elem: '#area-picker',
        change: function (res) {
            //选择结果
            console.log(res);
        }
    });

    $(function () {
        $.ajax({
            type: "POST",
            url:urlapi+"type/getType",
            success: function (data) {
                console.log(data.data);
                $.each(data.data, function (index, item) {
                    // alert(index);
                    // alert(item);
                   $("#type-picker").append('<option value= "' + item.typeId +'">'+item.name+'</option>');
                    //$("#type-picker").append('<option value="' + item.typeId +'">'+item.name+'</option>');
                    
                });
                layui.form.render("select");
            },error: function () {
                alert("网络状态不好")
            }
        })
    });

});

</script> 
</body>
</html>